<template>
  <view v-if="show" class="pi-mask-5" @touchmove.stop>
    <view
      class="content-wrap"
      :class="aniShow ? animation.show : animation.hide"
      @tap="handleClose"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
let timer // 延时器

export default {
  name: 'PiMaskContent',
  props: {
    // 是否显示
    isShow: {
      required: true,
      type: Boolean,
      default: false
    },
    // 点击蒙层是否允许关闭
    maskClosable: {
      required: false,
      type: Boolean,
      default: true
    },
    animation: {
      required: false,
      type: Object,
      default () {
        return {
          show: 'ani-slide-bottom-show', // 显示的时候执行的动画
          hide: 'ani-slide-bottom-hide', // 隐藏的时候执行的动画
          duration: 400 // 动画持续时间
        }
      }
    }
  },
  data () {
    return {
      show: this.isShow,
      aniShow: this.isShow
    }
  },
  watch: {
    isShow () {
      if (this.isShow) {
        this.show = this.isShow
        this.aniShow = this.isShow
        uni.hideKeyboard()
        uni.$emit('mask-show')
      } else {
        this.aniShow = this.isShow
        this.closeMask()
      }
    }
  },
  methods: {
    closeMask () {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        this.show = false
        uni.$emit('mask-hide')
      }, this.animation.duration)
    },
    handleClose () {
      if (!this.maskClosable) return
      this.aniShow = false
      this.$emit('close')
      this.closeMask()
    }
  },
  beforeDestroy () {
    if (timer) clearTimeout(timer)
  }
}
</script>

<style lang="scss" scoped>
.pi-mask-5 {
  z-index: 12;
  .content-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba($color: #000, $alpha: 0.3);
    z-index: 12;
  }
}
</style>
